<template>
  <el-container>
    <el-header>
      <el-form :inline="true" :model="perData">
        <el-form-item label="权限名">
          <el-input
            v-model="perData.name"
            placeholder="请输入名称关键字"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="域">
          <el-select v-model="perData.region" clearable placeholder="请选择域">
            <el-option
              v-for="item in regions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作">
          <el-select
            v-model="perData.option"
            clearable
            placeholder="请选择操作"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="getPermissionTable(perData)"
            icon="el-icon-search"
          >查询
          </el-button
          >
          <el-button
            type="success"
            icon="el-icon-plus"
            @click="insertOnePerVis = true"
          >新增权限
          </el-button
          >
          <el-button
            type="danger"
            @click="deleteInit(deleteIds)"
            icon="el-icon-delete"
          >批量删除权限
          </el-button
          >
        </el-form-item>
      </el-form>
    </el-header>
    <el-main
    >
      <el-table
        :data="perTable"
        height="550"
        border
        @selection-change="selectionUser"
      >
        <el-table-column label="序号" type="index" width="50" align="center"/>
        <el-table-column type="selection" width="35" align="center"/>
        <el-table-column
          :prop="column.name"
          :label="column.title"
          :width="column.width"
          v-for="column in tableColumn"
          :key="column.id"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            <template v-if="column.name == 'options'">
              <el-button type="primary" size="small" icon="el-icon-edit"
              >修改
              </el-button>
              <el-button
                type="danger"
                size="small"
                icon="el-icon-delete"
                @click="deleteInit([scope.row.id])"
              >删除
              </el-button>
            </template>
            <template v-else>{{ scope.row[column.name] }}</template>
          </template>
        </el-table-column>
      </el-table>
    </el-main
    >
    <el-footer>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-size="perData.current"
        :size-sizes="[15, 30, 45, 100, 200, 300, 400]"
        layout="total, sizes,pager, prev, next, jumper"
        :size-size="perData.size"
        background
        :total="total"
      >
      </el-pagination>
    </el-footer>
    <el-dialog title="新增权限" :visible.sync="insertOnePerVis" width="35%">
      <el-form :model="insertPerData" label-width="15%">
        <el-form-item label="名称">
          <el-input
            v-model="insertPerData.name"
            placeholder="请输入权限名"
          ></el-input>
        </el-form-item>
        <el-form-item label="权限域">
          <el-select
            v-model="insertPerData.region"
            placeholder="请选择域"
            clearable
          >
            <el-option
              v-for="item in regions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="作用实体">
          <el-input
            v-model="insertPerData.entity"
            placeholder="请输入对象名"
          ></el-input>
        </el-form-item>
        <el-form-item label="允许操作">
          <el-select
            v-model="insertPerData.option"
            placeholder="请选择操作"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" align="center">
        <el-button @click="insertOnePerVis = false">取 消</el-button>
        <el-button type="primary" @click="insertOnePermission(insertPerData)"
        >确 定
        </el-button
        >
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  name: "Permission",
  data() {
    return {
      //搜索对象
      perData: {current: 1, size: 10},
      //添加数据的容器
      insertPerData: {},
      //数据总数
      total: 0,
      //表格数据列表
      perTable: [],
      //表格列名映射
      tableColumn: [
        {name: "name", title: "权限名", width: "190"},
        {name: "region", title: "域", width: "190"},
        {name: "entity", title: "实体", width: "190"},
        {name: "option", title: "操作", width: "190"},
        {name: "options", title: "操作", width: "300"},
      ],
      //域的分类搜索
      regions: [
        {label: "系统", value: "sys"},
        {label: "操作", value: "op"},
        {label: "用户", value: "user"},
      ],
      //操作的分类搜索
      options: [
        {label: "添加", value: "insert"},
        {label: "修改", value: "update"},
        {label: "删除", value: "delete"},
        {label: "查询", value: "select"},
      ],
      //新增弹窗显示
      insertOnePerVis: false,
      //待删除的id
      deleteIds: [],
    };
  },
  created() {
    this.getPermissionTable(this.perData);
  },
  methods: {
    //获取权限列表
    getPermissionTable(obj) {
      this.$store
        .dispatch("permission/getPermissionTable", obj)
        .then((response) => {
          this.perTable = response.data;
          this.total = response.other.pageSize;
        })
        .catch(() => {
        });
    },
    //新增一条权限信息
    insertOnePermission(obj) {
      this.$store
        .dispatch("permission/insertOnePermission", obj)
        .then((response) => {
          if (response.success) {
            this.$message({
              message: "新增权限成功!你仍可继续添加",
              type: "success",
            });
            this.getPermissionTable(this.perData);
          }
        })
        .catch(() => {
        });
    },
    //批量删除权限
    deletePermissions(ids) {
      this.$store
        .dispatch("permission/deletePermissions", ids)
        .then((response) => {
          if (response.success) {
            this.$message({
              message: `已成功删除${response.data}条权限!`,
              type: "success",
            });
            this.getPermissionTable(this.perData);
          }
        })
        .catch(() => {
        });
    },
    //删除提示
    deleteInit(ids) {
      if (ids.length == 0) {
        return;
      }
      this.deleteIds = ids;
      this.$confirm(
        `此操作将永久删除选择的${ids.length}条权限,是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        this.deletePermissions(ids);
      });
    },
    //调整分页长度时触发
    handleSizeChange(val) {
      this.perData.size = val;
      this.getPermissionTable(this.perData);
    },
    //点击分页时触发
    handleCurrentChange(val) {
      this.perData.current = val;
      this.getPermissionTable(this.perData);
    },
    //多选更改时触发
    selectionUser(val) {
      var ids = [];
      //遍历并提取ID
      val.forEach((per) => {
        ids.push(per.id);
      });
      this.deleteIds = ids;
    },
  },
};
</script>

<style>
</style>
